<template>
  <div class="app-container">
      实训单位提交历史记录
    <el-row type="flex" class="row-bg" justify="center" :gutter="20">
      <el-col :span="12">
        <el-select v-model="param.reportType" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input
        placeholder="请输入标题"
        prefix-icon="el-icon-search" clearable v-model="param.reportTitle">
        </el-input>
      </el-col>
      <el-col :span="4">
    <el-button icon="el-icon-search" circle @click="selectReport"></el-button>
      </el-col>
    </el-row>
    <el-row>
    <el-table :data="companytList" style="width: 100%;margin-top:30px;" border>
      <el-table-column align="center" label="实训单位名称" width="150">
        <template slot-scope="scope">
          {{ scope.row.internshipName }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="实训单位类型" width="200">
        <template slot-scope="scope">
          {{ scope.row.internshipTypeName }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="提交时间" width="160">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="推荐理由">
        <template slot-scope="scope">
          {{ scope.row.introduce }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="状态">
        <template slot-scope="scope">
          {{ scope.row.internshipStatusName }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="驳回原因">
        <template slot-scope="scope">
          {{ scope.row.reject }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
        <el-button v-if="scope.row.internshipStatus === 0" type="primary" size="small" @click="remindAdmin(scope.row)" :disabled="disabledremind">提醒审核</el-button>
          <el-button v-if="scope.row.internshipStatus === 1" type="primary" size="small" @click="detail(scope.row)">详情</el-button>
          <el-button v-if="scope.row.internshipStatus === 2" type="primary" size="small" @click="EditCompany(scope.row)">再次提交</el-button>
        </template>
      </el-table-column>
      
    </el-table>
    </el-row>
    <!--分页组件-->
<el-pagination background layout="prev, pager, next"  prev-text="上一页"
        next-text="下一页"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currpage"
        :page-size="pageSize"
        :total="total"></el-pagination>
    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle">
      角色列表<br/><br/>
      <el-checkbox-group v-model="checkedList">
        <el-checkbox v-for="(role, index) in roleList" :key="index" :label="role.rlName"></el-checkbox>
      </el-checkbox-group>
      <br/>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmUser">提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {addCompanyHistory } from '@/api/company'
import {remindAdmin } from '@/api/notify'
export default {
  data() {
    return {
      companytList: [],
      param :{
      start: 0,
      limit: 10,
      reportType:'',
      reportTitle:''
      },
      pageSize: 10, //每一页的数据大小
      currpage: 1, //当前页
      total:0,//总条数
      disabledremind:false
    }
  },
  computed: {
    routesData() {
      return this.routes
    }
  },
  //页面打开时执行的方法
  created() {
    this.addCompanyHistory()
  },
  methods: {

    async remindAdmin(row) {
      let res = await remindAdmin(row).then(()=>{
            this.$message({
              type: 'success',
              message: '提醒成功!'
            })
            this.disabledremind = true
            }
          ).catch(err=>{
            this.$message({
              type: 'error',
              message: '提醒失败!'
            })
            })
    },
    async addCompanyHistory() {
      let res = await addCompanyHistory(this.param)
      this.companytList = res.beans
      this.total = res.bean.total
    },
    async getRoleList() {
      let res = await getRoles()
      this.roleList = res.beans
    },
    toDetail(row) {
     this.$router.push({
        path: "/reportDetail",
        query:{
          reportId:row.reportId
        }
        })
    },
    async confirmUser() {
      this.user.roleList.splice(0, this.user.roleList.length)
      this.checkedList.forEach( rlName => {
        this.roleList.forEach( role => {
          if(rlName === role.rlName) {
            this.user.roleList.push(role)
            return
          }
        })
      })

      await assignUserRoles(this.user)
      this.getUserList()
      this.dialogVisible = false
    },
    //页大小变化
     handleSizeChange(val) {
      this.pageSize = val;
      this.param.start = this.pageSize*(this.currpage-1)
      this.addCompanyHistory();
    },
    //页标号变化
    handleCurrentChange(val) {
      this.currpage = val;
      this.param.start = this.pageSize*(this.currpage-1)
      this.addCompanyHistory();
    },
    selectReport(){
      this.param.start = 0;
      this.param.limit = 10;
      this.currpage = 1;
      this.addCompanyHistory()
    }, //进入实训单位详情
    detail(item){
      this.$router.push({
        path: "/companyDetail",
        query:{
          companyId:item.internshipId
        }
        })
    },
    EditCompany(item){
      this.$router.push({
        path: "/editCompany",
        query:{
          companyId:item.internshipId
        }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
